<template>
	<view class="category">

		<view class="content">
			
			<view class="title flex_r_between">
				<view class="btn error" @click="cancelCategory">取消</view>
				
				<view class="text">请选择搭子类型</view>
				
				<view class="btn success" @click="onSubmit">确认</view>
			</view>
			
			<picker-view v-if="visible" :indicator-style="indicatorStyle" indicator-class="picker-box" :value="value" @change="bindChange"
				class="picker-view">
				<picker-view-column>
					<view class="item flex_r_around" v-for="(item,index) in tag" :key="index">
						<text>{{ item.name }}</text>
					</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item flex_center" v-for="(item,index) in child" :key="index">
						<image :src="item.remark" mode="aspectFill"></image>
						<text>{{ item.name }}</text>
					</view>
				</picker-view-column>
			</picker-view>
			<view style="">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tag: [],

				type_pid: 0,
				type_id: 0,
				type_pname: '',

				child: [],

				value: [0, 0],
				visible: false,
				indicatorStyle: `height: 50px;background: rgba(253, 42, 83, 0.06)`,
				
				arr: [0 , 0],
			}
		},
		methods: {

			getDictByArray() {
				this.$post('/index/getDictByArray?type_id=6,7,8,9,10,11,12').then(res => {
					this.tag = res.data;
					if (this.tag.length) {
						this.type_pid = this.tag[0].id;
						this.type_pname = this.tag[0].name;
						this.child = this.tag[0].child;
						this.visible = true;
					}
				});
			},
			
			bindChange(e){
				var index = e.detail.value[0];
				this.child = this.tag[index].child;
				this.arr = e.detail.value;
			},

			onPid(item) {
				this.type_pid = item.id;
				this.type_pname = item.name;
				this.child = item.child;
			},
			
			onSubmit(){
				
				this.$emit('toCategory',{
					type_pname: this.tag[this.arr[0]].name,
					type_pid: this.tag[this.arr[0]].id,
					type_name: this.child[this.arr[1]].name,
					type_id: this.child[this.arr[1]].id,
				});
				
			},
			
			cancelCategory(){
				this.$emit('cancelCategory');
			},

		},

		created() {
			this.getDictByArray();
		},
	}
</script>

<style lang="less" scoped>
	.category {
		height: 50vh;
		background: #FFF;
	}

	.picker-view {
		height: calc(50vh - 60rpx);
		width: 100%;
	}

	.item {
		
		image {
			width: 36px;
			height: 36px;
			background: #D8D8D8;
			border-radius: 8px;
		}
		
		text {
			margin-left: 16rpx;
			font-size: 24rpx;
			color: #131313;
			line-height: 34rpx;
		}
		
	}

	.title {
		height: 80rpx;
		
		.btn {
			width: 160rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 28rpx;
		}
		
		.success {
			color: #11AE52;
		}
		
		.error {
			color: #FD2A53;
		}
		
		.text {
			flex: 1;
			color: #333;
			font-size: 28rpx;
			text-align: center;
		}
	}

</style>